<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '创建教室' : '编辑教室'" append-to-body width="600px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>
            <el-form-item label="互动教室" prop="roomName" label-width="100px">
                <el-input v-model="form.roomName" style="width: 405px;" placeholder="请输入互动教室名称" maxlength="20" clearable/>
            </el-form-item>

            <el-form-item label="设备号" prop="deviceNumber" label-width="100px">
                <el-input v-model="form.deviceNumber" style="width: 405px;" placeholder="请输入设备号"  @change="toDevice()" clearable/>
            </el-form-item>
              
            <el-form-item label="教室类型" prop="roomType" >
                <el-select v-model="form.roomType" clearable  filterable placeholder="请选择教室类型" style="width: 405px;" :disabled="disabled">
                    <el-option
                        v-for="item in roomTypes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="所属学校" prop="schId"  v-if="this.show">
                <el-select v-model="form.schId" clearable  filterable placeholder="请选择所属学校" style="width: 405px;" :disabled="disabled">
                    <el-option
                        v-for="item in schIds"
                        :key="item.schId"
                        :label="item.schName"
                        :value="item.schId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="房间人数" prop="roommemberCount">
               <el-input-number v-model="form.roommemberCount"  :min="1" :max="500" label="描述文字" :precision="0" :step="1"></el-input-number>
               <el-tooltip class="tooltip" placement="top" effect="light">
                <div slot="content">
                      <p>访问人数1-500人，根据实际教室填写！</p>
                </div>
                <i class="el-icon-question"></i>
            </el-tooltip>
            </el-form-item>

            <!-- <el-form-item label="互动模板" prop="crModuleId" >
                <el-select v-model="form.crModuleId" clearable  filterable placeholder="请选择互动模板" style="width: 405px;" :disabled="disabled">
                    <el-option
                        v-for="item in formworks"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <!-- <el-form-item label="班级名称" prop="groupName" label-width="100px">
                <el-input v-model="form.groupName" style="width: 405px;" placeholder="请输入班级名称"  clearable/>
            </el-form-item> -->

            <el-form-item label="班级地址" prop="address" label-width="100px">
                <el-input v-model="form.address" style="width: 405px;" placeholder="请输入班级地址"  clearable/>
            </el-form-item>


            <el-form-item label="状态" prop="status">
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>

            <el-form-item label="描述信息">
                <div style="margin: 20px 0;"></div>
                <el-input v-model="form.roomInfo" style="width: 405px;" rows="5" type="textarea" maxlength="100"  clearable show-word-limit />
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" :disabled='this.disabled'>确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { classroomSave } from '@/api/request'
import { isDevice } from '@/api/data'
import { validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        formworks: {
          type: Array,
          required: true
        },
        schIds:{
           type: Array,
           required: true 
        },
        roomTypes:{
           type: Array,
           required: true 
        }
        
    },
    data() {
        return {
            show:true,
            disabled:false,
            loading: false, dialog: false, permissions: [],
            form: {
                id:'',
                roomName:'',        //教室名称
                deviceNumber: '',   //设备号
                roomType:'',        //教室类型
                schId:'',          //所属学校(区域创建才有)           
                crModuleId:'',    //互动模板
                roommemberCount:'',   //房间访问人数上限
                status: 0,
                roomInfo:'',      //备注
                address:'',
            },
            rules: {
                roomName:[
                    {validator:validateEmpty,trigger: 'blur',}, 
                    { required: true, trigger: 'blur',message: '请输入教室名称',min: 4,
                        max: 30,},

                        
                ],
                roomType:[
                    { required: true, trigger: 'blur',message: '请选择教室类型'},
                ],
                deviceNumber:[
                    { required: true, trigger: 'blur',message: '请输入设备号'},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                // crModuleId:[
                //     { required: true, trigger: 'blur',message: '请请选择互动模板'},
                // ],
                schId:[
                    { required: true, trigger: 'blur',message: '请请选所属学校'},
                ],
            }, 
            
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                if (valid){
                    this.form.crModuleId='b1d6c7b5200549669bf786e33bd67b20'
                    classroomSave(this.form).then(res => {
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }

            })

        },500),
        toDevice(){
            if (this.form.deviceNumber.trim()) {
                isDevice(this.form.deviceNumber).then(res =>{
                    // console.log(res.code == 2001)
                    if (res.code  == 2001) {
                        this.$message.error(res.msg);
                        this.disabled = true
                    }
                    if (res.code  == 4005) {
                        this.$message.error(res.msg);
                        this.disabled = true
                    }
                    else{
                        this.disabled = false
                    }
                })
            }else{
                this.disabled = false
            }
            
        }
        
    },

}
</script>


<style scoped lang="scss">
.numClass{
    text-align: left !important;
}
</style>
